<template>
  <el-tree
    :data="treeData"
  ></el-tree>
</template>

<script>
import _ from 'lodash';
export default {
    props:{
      data:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return{
        treeData:[]
      }
    },
    watch:{
      data(){// 数据更新了就需要重新渲染
        this.transformData();
      }
    },
    methods:{
      // 转换数据格式
      transformData(){
        // 需要根据数据克隆一份，玩克隆的那一份,防止在子组件中直接操作父组件的数据
        let AllData = _.cloneDeep(this.data);
        let fun = function (AllData) {
          return AllData.reduce((memo,current)=>{
            current.label = current.desp;
            console.log(current);
            // 将系统类别添加进tree
            if(current.systemLeibie != null && current.systemLeibie.length !== 0) {
              current.systemLeibie.reduce((arr,one)=>{
                current.children ? current.children.push(one) : current.children=[one];
                // console.log(one.label);
              },[])
            }
            // 将下级的省市县添加进tree
            if(current.geocodeList != null && current.geocodeList.length !== 0) {
              current.geocodeList.reduce((arr,one)=>{
                one.label = one.desp;
                current.children ? current.children.push(one) : current.children=[one];
                // console.log(one);
                // console.log(arr);
                fun([one]);// 递归添加
                return arr;
              },[])
            }
            memo.push(current);
            return memo;
          },[]);
        }
        this.treeData = fun(AllData);
      }
    },
    mounted() {
      this.transformData();
    }
  }

</script>
